<template>
	<div>
		<div id="check" class="check-container">
      <div class="check-head">
        <div class="check-name text-center">
          <b>进厂物料请检单</b>
        </div>
        <div class="check-num">
          <span>记录编号：CW / SMP·002-R01-02</span>
        </div>
      </div>
      <div class="check-body">
        <table border="1">
          <tr>
          	<td class="t-3 h-60">物料名称</td>
            <td class="t-10 h-60"><div class="m-l-5">{{ checkList.productName }}</div></td>
            <td class="t-3 h-60">原厂批号</td>
            <td class="t-4 h-60"><div class="m-l-5">{{ yfbList.originalBatch }}</div></td>
          </tr>
          <tr>
          	<td class="t-3 h-60">入厂批号</td>
            <td class="t-7 h-60"><div class="m-l-5">{{ checkList.batchNum }}</div></td>
            <td class="t-3 h-60">物料代码</td>
            <td class="t-7 h-60"><div class="m-l-5">{{ checkList.productGmp }}</div></td>
          </tr>
          <tr>
          	<td class="t-3 h-60">包装规格</td>
            <td class="t-7 h-60"><div class="m-l-5">{{ checkList.productPackSpec }}</div></td>
            <td class="t-3 h-60">总&nbsp;&nbsp;量</td>
            <td class="t-7 h-60"><div class="m-l-5">{{ number2Filter(yfbList.grossQuantity,yfbList.grossUnitName) }}</div></td>
          </tr>
          <tr>
          	<td class="t-3 h-60">包装容器</td>
            <td class="t-7 h-60">
              <div class="m-l-5">
                <div class="check-box"><img v-if="yfbList.packContainerName == '金属桶'" style="display: block;" src="@/assets/img/benefits.png" /></div>金属桶
                <div class="check-box"><img v-if="yfbList.packContainerName == '塑料桶'" style="display: block;" src="@/assets/img/benefits.png" /></div>塑料桶
                <div class="check-box"><img v-if="yfbList.packContainerName == '纸板桶'" style="display: block;" src="@/assets/img/benefits.png" /></div>纸板桶
                <div class="check-box"><img v-if="yfbList.packContainerName == '纸箱'" style="display: block;" src="@/assets/img/benefits.png" /></div>纸箱
                <div class="check-box"><img v-if="yfbList.packContainerName == '其他'" style="display: block;" src="@/assets/img/benefits.png" /></div>其他
              </div>
            </td>
            <td class="t-3 h-60">件&nbsp;&nbsp;数</td>
            <td class="t-7 h-60"><div class="m-l-5">{{ yfbList.grossPiece }} 件</div></td>
          </tr>
          <tr>
          	<td class="h-80" colspan="4">
              <div class="m-l-5">
                <div class="h-40" style="line-height: 40px;">
                  请验目的：
                  <div class="check-box"><img v-if="yfbList.checkPurposeName == '进厂检验'" style="display: block;" src="@/assets/img/benefits.png" /></div>进厂检验；
                  <div class="check-box"><img v-if="yfbList.checkPurposeName == '退货'" style="display: block;" src="@/assets/img/benefits.png" /></div>退货；
                  <div class="check-box"><img v-if="yfbList.checkPurposeName == '复验'" style="display: block;" src="@/assets/img/benefits.png" /></div>复验；
                  <div class="check-box"><img v-if="yfbList.checkPurposeName == '接近有效期'" style="display: block;" src="@/assets/img/benefits.png" /></div>接近有效期；
                  <div class="check-box"><img v-if="yfbList.checkPurposeName == '抽检'" style="display: block;" src="@/assets/img/benefits.png" /></div>抽检；
                  <div class="check-box"><img v-if="yfbList.checkPurposeName == '其他'" style="display: block;" src="@/assets/img/benefits.png" /></div>其他。
                </div>
                <div class="h-40" style="line-height: 40px;"></div>
              </div>
            </td>
          </tr>
        </table>
        <table border="1">
          <tr>
          	<td class="h-60" colspan="2"><div class="m-l-5">附：<div class="text-center">接收（初检）记录</div></div></td>
          </tr>
          <tr>
          	<td class="h-60" colspan="2"><div class="text-center">供应商/生产企业标签信息<div v-if="yfbList.productionDate != null" class="temp-production-date">生产日期：{{ yfbList.productionDate | showTime(yfbList.productionDateUnit) }}</div></div></td>
          </tr>
          <tr>
          	<td class="t-10 h-60"><div class="m-l-5">供应商：{{ yfbList.supplierName }}</div></td>
            <td class="t-10 h-60"><div class="m-l-5">生产企业：{{ yfbList.manufacturerName }}</div></td>
          </tr>
          <tr>
          	<td class="t-10 h-60"><div class="m-l-5">批准文号/注册证号：{{ yfbList.approvalNum }}</div></td>
            <td class="t-10 h-60"><div class="m-l-5">生产批号：{{ yfbList.productionBatch }}</div></td>
          </tr>
          <tr>
          	<td class="t-10 h-60">
              <div v-if="yfbList.validityDate != null && yfbList.validityDate != ''" class="m-l-5">有效期：{{ yfbList.validityDate | showTime(yfbList.selectDateUnit) }}</div>
              <div v-else class="m-l-5">复验期：{{ yfbList.reinspectDate | showTime(yfbList.selectDateUnit) }}</div>
            </td>
            <td class="t-10 h-60">
              <div class="m-l-5">
                <div class="check-box"><img v-if="yfbList.supplierLevel == '合格供应商'" style="display: block;" src="@/assets/img/benefits.png" /></div>合格供应商
                <div style="margin-left: 50px;" class="check-box"><img v-if="yfbList.supplierLevel == '新增供应商'" style="display: block;" src="@/assets/img/benefits.png" /></div>新增供应商
              </div>
            </td>
          </tr>
          <tr>
          	<td class="t-10 h-360 v-a-t">
              <div class="m-l-5">随货文件：
                <div class="m-l-20">
                  <div style="width: 50%;display: inline-block;">
                    <div class="check-box"><img v-if="followFileNames.indexOf('出厂检验报告单') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>出厂检验报告单</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('送货单') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>送货单</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('到货通知') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>到货通知</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('装箱单') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>装箱单</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('其他') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>其他
                  </div>
                  <div style="display: inline-block;position: absolute;">
                    <div class="check-box"><img v-if="followFileNames.indexOf('合格证') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>合格证</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('随货同行') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>随货同行</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('品质证明') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>品质证明</br>
                    <div class="check-box"><img v-if="followFileNames.indexOf('发票') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>发票
                  </div>
                </div>
              </div>
            </td>
            <td class="t-10 h-360 v-a-t">
              <div class="m-l-5">
                包装状况：
                <div class="m-l-20">
                  <div class="check-box"><img v-if="packStatusNames.indexOf('包装完好') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>包装完好
                  <div style="margin-left: 94px;" class="check-box"><img v-if="packStatusNames.indexOf('标识清晰') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>标识清晰</br>
                  <div class="check-box"><img v-if="packStatusNames.indexOf('实物批号是否与报告书批号一致') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>实物批号是否与报告书批号一致</br>
                  <div class="check-box"><img v-if="packStatusNames.indexOf('是否在有效期内') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>是否在有效期内</br>
                  <div class="check-box"><img v-if="packStatusNames.indexOf('数量与交接单是否一致') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>数量与交接单是否一致
                </div>
                <div>
                  如包装异常，请选择或注明情况，必要时附照片。
                  <div class="m-l-20">
                    <div style="width: 30%;display: inline-block;">
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('包装破损') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>包装破损</br>
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('包装受潮') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>包装受潮</br>
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('虫蛀') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>虫蛀
                    </div>
                    <div style="display: inline-block;position: absolute;">
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('渗漏') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>渗漏</br>
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('水渍') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>水渍</br>
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('其他') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>其他
                    </div>
                    <div style="display: inline-block;margin-left: 100px;position: absolute;">
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('封签破损') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>封签破损</br>
                      <div class="check-box"><img v-if="packExceptionNames.indexOf('霉变') > -1" style="display: block;" src="@/assets/img/benefits.png" /></div>霉变
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
          	<td class="h-120 v-a-t" colspan="2">
              <div class="m-l-5">
                <div style="width: 12%;display: inline-block;margin-top: 5px;">
                  初检结论：
                </div>
                <div style="display: inline-block;position: absolute;margin-top: 5px;">
                  <div>
                    <div class="check-box"><img v-if="yfbList.firstVerdict == 0" style="display: block;" src="@/assets/img/benefits.png" /></div>符合规定
                  </div>
                  <div style="margin-top: 11px;">
                    <div class="check-box"><img v-if="yfbList.firstVerdict == 1" style="display: block;" src="@/assets/img/benefits.png" /></div>不符合规定</br>
                  </div>
                  <div style="margin-top: 11px;">
                    <div class="check-box"><img v-if="false" style="display: block;" src="@/assets/img/benefits.png" /></div>符合规定的数量为&nbsp;&nbsp;&nbsp;&nbsp;，不符合规定的数量为&nbsp;&nbsp;&nbsp;&nbsp;。
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
          	<td class="t-10 h-60"><div class="m-l-5">物料进厂日期：{{ yfbList.comeDate | showTime }}</div></td>
            <td class="t-10 h-60"><div class="m-l-5">物料接收人：</div></td>
          </tr>
          <tr>
          	<td class="t-10 h-60"><div class="m-l-5">请检部门：{{ checkList.registCheckDepartmentName }}</div></td>
            <td class="t-10 h-60"><div class="m-l-5">请检日期：{{ checkList.registCheckDate | showTime }}</div></td>
          </tr>
          <tr>
          	<td class="t-10 h-60"><div class="m-l-5">请检人：</div></td>
            <td class="t-10 h-60"><div class="m-l-5">请检单接收人/日期：</div></td>
          </tr>
        </table>
        <div style="margin-top: 13px;">
          注：库管员应在根据验收情况在相应选项“<div class="check-box" />”内用“<img style="display: inline-block;" src="@/assets/img/benefits.png" />”表示。</div>
        </div>
        <div style="float: right;margin-top: 15px;">2021.06.18生效</div>
    </div>
	</div>
</template>

<script>
  import {
    getCheckInfo,
    getFollowFileList,
    getPackStatusList,
    getPackExceptionList
  } from '@/api/check'
  import { CODE_OK } from '@/common/js/config'
  import { isBlank,parseTime } from '@/common/js/utils'
	export default {
    data() {
      return {
        visible: false,
        followFileNames: [],
        packStatusNames: [],
        packExceptionNames: [],
        checkList: {},
        yfbList: {},
        dataForm: {
          packContainerId: []
        }
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.checkList = this.childDataForm
        this.getData()
        this.visible = true
      }
    },
    methods: {
      getData() {
        const params = {
          content: 'yfb',
          checkId: this.checkList.checkId
        }
        getCheckInfo(params).then(res => {
          if (res.code === CODE_OK) {
          	this.yfbList = res.info.yfbList
            this.dataForm.packContainerId.push(this.yfbList.packContainerId)
            this.idsToNames()
          }else{
          	this.$message.error(res.msg)
          }
        })
      },
      number2Filter(number,unit) {
        //过滤
        if (isBlank(number)) return
        number = number + ''
        if (unit == 'kg' || unit == 'g') {
          if (number.indexOf('.') == -1) {
            return number + '.00' + unit
          }else{
            //小数点后只有一位，加0
            if (number.substring(number.indexOf('.')+1).length == 1) {
              return number + '0' + unit
            }else{
              return number + unit
            }
          }
        }else{
          return number + unit
        }
      },
      idsToNames() {
        const params = {
          checkTypeId: this.checkList.checkTypeId,
          printVersion: this.checkList.printCheckVersion
        }
        if (!isBlank(this.yfbList.followFileIds)) {
          getFollowFileList(params).then(res => {
            if (res.code === CODE_OK) {
              let followFileIds = this.yfbList.followFileIds.split(',')
              let followFileList = res.list
              for (let id of followFileIds) {
                for (let f of followFileList) {
                  if (id == f.followFileId) {
                    this.followFileNames.push(f.followFileName)
                    break
                  }
                }
              }
            }else{
              this.$message.error(res.msg)
            }
          })
        }
        if (!isBlank(this.yfbList.packStatusIds)) {
          getPackStatusList(params).then(res => {
            if (res.code === CODE_OK) {
              let packStatusIds = this.yfbList.packStatusIds.split(',')
              let packStatusList = res.list
              for (let id of packStatusIds) {
                for (let p of packStatusList) {
                  if (id == p.packStatusId) {
                    this.packStatusNames.push(p.packStatusName)
                    break
                  }
                }
              }
            }else{
              this.$message.error(res.msg)
            }
          })
        }
        if (!isBlank(this.yfbList.packExceptionIds)) {
          getPackExceptionList(params).then(res => {
            if (res.code === CODE_OK) {
              let packExceptionIds = this.yfbList.packExceptionIds.split(',')
              let packExceptionList = res.list
              for (let id of packExceptionIds) {
                for (let p of packExceptionList) {
                  if (id == p.packExceptionId) {
                    this.packExceptionNames.push(p.packExceptionName)
                    break
                  }
                }
              }
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      },
      close() {
        this.visible = false
        this.$emit('close')
      }
    }
	}
</script>

<style type="text/scss" lang="scss" scoped>
  .check-container{
    color: black;
    background-color: #fff;
    font-family: SimSun;
    font-size: 20px;
    width: 960px;
    height: 1480px;
    padding: 15px;
    .check-head{
      height: 120px;
      .check-name{
        font-size: 30px;
        height: 95px;
        line-height: 95px;
      }
      .check-num{
        font-family: "微软雅黑";
        height: 25px;
        margin-left: 65%;
        margin-top: -5px;
      }
    }
    .check-body{
      height: 600px;
      .v-a-t{
        vertical-align: top;
      }
      .h-60{
        height: 60px;
      }
      .h-360{
        height: 360px;
      }
      .h-40{
        height: 40px;
      }
      .h-80{
        height: 80px;
      }
      .h-120{
        height: 120px;
      }
      .t-3{
        width: 144px;
        text-align: center;
      }
      .t-4{
        width: 192px;
      }
      .t-7{
        width: 336px;
      }
      .t-10{
        width: 480px;
      }
      .m-l-5{
        margin-left: 5px;
        .text-center{
          text-align: center;
          margin-top: -28px;
        }
      }
      .m-l-20{
        margin-left: 20px;
      }
    }
    .check-foot{
      height: 50px;
    }
    .temp-production-date{
      position: absolute;
      margin-top: -10px;
      margin-left: 650px;
    }
    .check-box{
      display: inline-block;
      width: 15px;
      height: 15px;
      border: 1px solid black;
    }
  }
</style>
